<template>
  <div class="itemLink dd-row dd-h-2side dd-v-center" @click='goWhere(item.link)' >
    <div class="iconAndT dd-row dd-v-center">
      <div class="icon dd-row dd-v-center">
        <img :src="require(`@/assets/img/${item.icon}.png`)" alt="icon" />
        <!-- require(`./img/${item.EnName}.jpg`) -->
      </div>
      <div class="title" style='margin-left:5pt;' v-if="item.title">{{item.title}}</div>
    </div>
    <div class="introAndI dd-row dd-v-center">
      <!-- <div  style='margin-right:5pt;color:{{item.introColor}};' v-if="item.intro">{{item.intro}}</div> -->
      <div  :style="{color:item.introColor,marginRight:'5pt'}" v-if="item.intro">{{item.intro}}</div>
      <div class="icon dd-row dd-v-center">
        <img src="@/assets/img/right.png" alt="icon" />
      </div>
    </div>
  </div>

</template>
<script>
export default {
    props:['item'],
    mounted(){
        
    },
    methods:{
        linkTo(_link){
            alert(_link)
            this.$router.push(_link);
        },
        goWhere(_link){
          console.log("gowhere",_link);
          this.$router.push("/my/"+_link)
        }
    }
}
</script>
<style scoped>

/* itemLink  */

.itemLink {
  width: 100%;
  height: 30pt;
  margin-bottom: 1pt;
  box-sizing: border-box;
  border-bottom: 1pt dotted #ccc;
  padding:2pt 5pt;
}

.itemLink .iconAndT {
  font-size: 12pt;
  font-weight: normal;
}

.itemLink .iconAndT .title {
}


.itemLink .introAndI {
  font-size: 11pt;
}

.itemLink .icon {
  width: 12pt;
  height: 12pt;
}

.itemLink .icon>img {
  width: 12pt;
  height: 12pt;
}


</style>

